<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-siteapp,no-cache,no-store">
    <meta http-equiv="Expires" content="0">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <title>组织编辑</title>
    <link rel="stylesheet" th:href="@{/plugins/layui/css/layui.css}" media="all" />
</head>
<body class="layui-container">
<br/>
<form class="layui-form" method="POST">
    <input type="hidden" name="departmentId" th:value="${record.departmentId}"/>
    <input type="hidden" name="parentId" th:value="${parentId == null ? record.parentId : parentId}"/>
    <input type="hidden" name="others['roles']" id="adddept-roles" />

    <div class="layui-form-item">
        <label class="layui-form-label">组织名称：</label>
        <div class="layui-input-block">
            <input type="text" name="departmentName" th:value="${record.departmentName}" maxlength="100" lay-verify="required" autocomplete="off" placeholder="请输入角色标记" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">组织描述：</label>
        <div class="layui-input-block">
            <input type="text" name="departmentDesc" th:value="${record.departmentDesc}" maxlength="100" lay-verify="required" autocomplete="off" placeholder="请输入角色名称" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">管理域：</label>
        <div class="layui-input-block">
            <select name="domain" lay-verify="required" lay-search="" th:value="${record.domain}">
                <option value="">--请选择--</option>
                <option value="SYS_ADMIN" th:selected="${record.domain == 'SYS_ADMIN'}">管理员</option>
                <option value="SP" th:selected="${record.domain == 'SP'}">商户</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱：</label>
        <div class="layui-input-block">
            <input type="text" name="email" th:value="${record.email}" maxlength="50" autocomplete="off" placeholder="请输入角色名称" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">地址：</label>
        <div class="layui-input-block">
            <input type="text" name="address" th:value="${record.address}" maxlength="200" autocomplete="off" placeholder="请输入角色名称" class="layui-input">
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>角色分配</legend>
    </fieldset>
    <div class="layui-form-item">
        <input type="checkbox" name="all" lay-skin="primary" th:if="${departRoles.size() > 0}" lay-filter="allChoose" title="全选">
        <th:block th:if="${record.departmentId != null}" th:each="role : ${departRoles}">
            <input type="checkbox" name="" lay-skin="primary" lay-filter="itemChoose" th:checked="${role.others.check}" th:value="${role.roleId}" th:title="${role.roleName}">
        </th:block>
        <th:block th:if="${record.departmentId == null}" th:each="role : ${departRoles}">
            <input type="checkbox" name="" lay-skin="primary" lay-filter="itemChoose" th:value="${role.roleId}" th:title="${role.roleName}">
        </th:block>
    </div>
    <div class="layui-form-item">*
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="save">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!-- 引用layer基本js -->
<script th:src="@{/plugins/layui/layui.js}"></script>
<script>
    layui.config({
        base : '../../build/js/',
        version : '1.0.1'
    }).use(['form', 'common'], function() {
        var $ = layui.jquery, common = layui.common, form = layui.form;

        // 复选框全部选择，自动选中全选按钮
        form.on('checkbox(itemChoose)',function(data){
            var sib = $(data.elem).parent().find('input[type="checkbox"]:checked').length; // 选中个数
            var total = $(data.elem).parent().find('input[type="checkbox"]').length - 1; // 总个数，排除全选
            // 全选选择则选中数-1
            if($(this).parent().find('input[name="all"]').prop("checked")) {
                sib = sib - 1;
            }
            if(sib == total){
                $(this).parent().find('input[name="all"]').prop("checked",true);
                form.render();
            }else{
                $(this).parent().find('input[name="all"]').prop("checked",false);
                form.render();
            }
            var values = [];
            $("input[name!='all']:checked").each(function() {
                values.push($(this).val());
            });
            // 填充权限参数
            $("#adddept-roles").val(values.join(','));
        });

        //全选反选
        form.on('checkbox(allChoose)', function(data){
            var that = this;
            $(this).parent().find("input:checkbox[name!='all']").each(function(index, item){
                this.checked = that.checked;
            });
            form.render('checkbox');
            var values = [];
            $("input[name!='all']:checked").each(function() {
                values.push($(this).val());
            });
            // 填充权限参数
            $("#adddept-roles").val(values.join(','));
        });

        /**保存*/
        form.on("submit(save)", function(data) {
            var url = "/auth/department/updateDepartment.json";
            // common.layerMsg(JSON.stringify(data.field));

            if($("#adddept-roles").val() == "") {
                common.layerErrorMsg("请选择角色");
                return false;
            }
            //异步表单提交
            common.fromPostAjax(url, data.field);
            return false;
        });
    })
</script>
</body>
</html>